<template>
    <div class="modifytable">
        <div class="modifytablechild" style="display: flex;margin-bottom: 30px;">
            <div
                style="width: 100px;height:100px;border-radius: 50px;overflow: hidden;border: 1px solid #ccc;margin-right: 15px">
                <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg" style="width: 100%;" alt="">
            </div>
            <div style="position:relative;width: 80px;">
                <div style="position: absolute;bottom: 0;">
                    <div style="margin-bottom: 20px;">部门：</div>
                    <div>入职时间：</div>
                </div>
            </div>
        </div>
        <div class="modifytablechilds">
            <el-form ref="ruleFormRef" style="max-width: 700px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="调整基本工资" prop="currentBasicSalary">
                    <div style="display: flex;justify-content: space-between;">
                        <el-input disabled :value="userdata.currentBasicSalary" />
                        <div style="width: 50px;text-align: center;line-height: 40px;color:#999;">
                            ->
                        </div>
                        <el-input v-model="ruleForm.currentBasicSalary" placeholder="请输入调整后的基本工资" />
                    </div>
                </el-form-item>
                <el-form-item label="调整岗位工资" prop="currentPostWage">
                    <div style="display: flex;justify-content: space-between;">
                        <el-input disabled :value="userdata.currentPostWage" />
                        <div style="width: 50px;text-align: center;line-height: 40px;color:#999;">
                            ->
                        </div>
                        <el-input v-model="ruleForm.currentPostWage" placeholder="请输入调整后的基本工资" />
                    </div>
                </el-form-item>
                <el-form-item label="工资合计">
                    <div style="display: flex;justify-content: space-between;">
                        <el-input disabled :value="priceall" />
                        <div style="width: 50px;text-align: center;line-height: 40px;color:#999;">
                            ->
                        </div>
                        <el-input disabled :value="currentBasicSalaryall" />
                    </div>
                </el-form-item>
                <el-form-item label="调整幅度">
                    <el-input disabled :value="pricealls" />
                </el-form-item>
                <el-form-item>
                    <div style="margin-left: 108px;">
                        <el-button style="background-color: #335bf8;color: white;" @click="submitForm(ruleFormRef)">
                            保存
                        </el-button>
                        <el-button @click="store.$state.dialogVisible = false">关闭</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useStore } from '@/stores/counter'
import { setWagesModify } from '@/api/Wages'
import { ElMessage } from 'element-plus'

let y = defineProps(['userdata'])

const store = useStore()
interface RuleForm {
    userId: string
    currentBasicSalary: string
    currentPostWage: string
}
const priceall = computed(() => {
    return y.userdata.currentBasicSalary + y.userdata.currentPostWage
})
const pricealls = computed(() => {
    return (-y.userdata.currentBasicSalary + -y.userdata.currentPostWage) + Number(ruleForm.value.currentBasicSalary) + Number(ruleForm.value.currentPostWage)
})
const currentBasicSalaryall = computed(() => {
    return Number(ruleForm.value.currentBasicSalary) + Number(ruleForm.value.currentPostWage)
})
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    userId: '',
    currentBasicSalary: '',
    currentPostWage: '',
})


const rules = ref<FormRules<RuleForm>>({
    currentBasicSalary: [
        { required: true, message: '请输入调整后的基本工资', trigger: 'blur' },
    ],
    currentPostWage: [
        { required: true, message: '请输入调整后的岗位工资', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.value.userId = y.userdata.userId
            setWagesModify(ruleForm.value.userId, ruleForm.value).then(res => {
                if (res.data.code == 10000) {
                    ElMessage({
                        message: res.data.message,
                        type: 'success',
                    })
                } else {
                    ElMessage.error(res.data.message)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style>
@import '@/assets/Wages.css'
</style>